<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="block">
    <!-- <span class="demonstration">显示总数</span> -->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-size="10"
      prev-text='上一页'
      next-text='下一页'
      layout="slot, prev,  next"
      :total="total">
      <template>
        <span class="total">共{{total}}条记录</span>
        <span class="page">第{{page}}/{{totalPage}}页</span>
      </template>
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    totalPage: {
      type: Number,
      required: true
    },
    page: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
    }
  },
  created () {},
  mounted () {},
  methods: {
    handleCurrentChange (page) {
      // console.log('page :>> ', this.page)
      this.$emit('update:page', page)
      this.$emit('gengxin')
    }
  }
}
</script>

<style lang="less" scoped>
/deep/.el-pagination{
  width: 1153px;
  .total{
    margin-right:15px ;
    font-size: 16px;
    color: #606266;
    font-weight: normal;
  }
  .page{
    margin-right:800px ;
    font-size: 16px;
    color: #606266;
    font-weight: normal;
  }
  .btn-prev{
    margin-right: 16px;
    padding: 0;
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
    border-radius: 5px;
    font-size: 14px;
  }
  .btn-next{
     padding: 0;
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
    border-radius: 5px;
    font-size: 14px;
  }
}

</style>
